<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="./iscroll-probe.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.parent {
			width: 200px;
			height: 400px;
			overflow: hidden;
			margin: 50px auto;
			border: 1px solid #333;
			position: relative;
		}
		.child {
			background-color: #fff;
			position: relative;
			z-index: 999;
			/* transform: translateY(0); */
		}
		.dropdown,.dropup {
			position: absolute;
			left: 0;
			width: 100%;
			text-align: center;
			line-height: 30px;
		}
		.dropdown {
			top: 0;
		}
		.dropup {
			bottom: 0;
		}
	</style>
	<script>

		window.onload = function() {
			let oDown = document.querySelector('.dropdown');
			let oUp = document.querySelector('.dropup');
			let oParent = document.querySelector('.parent');
			let oChild = document.querySelector('.child');
			let scrollTop = oChild.offsetHeight - oParent.offsetHeight;

			let myScroll = new IScroll('.parent',{
				disableMouse: true,
				disableTouch: false,
				disablePointer: true,
				probeType: 3,
			});

			function fnEnd() {
				let scrollTop = +this.getAttribute('scrollTop');
				oChild.style.transition = 'none';
				oChild.removeEventListener('transitionend', fnEnd);
				myScroll.y = scrollTop;
				myScroll.enable();
				oParent.addEventListener('touchend', touchendEvent, false);
			}

			function scrollCallback(load) {
				oParent.removeEventListener('touchend', touchendEvent);
				let scrollTop = +oChild.getAttribute('scrollTop');
				let loadHeight = +oChild.getAttribute('loadHeight');

				loadHeight = scrollTop < 0 ? -loadHeight : loadHeight;
				myScroll.disable();
				oChild.style.transition = '0.6s all ease';
				oChild.style.transform = `translateY(${scrollTop + loadHeight}px)`;
				load.innerHTML = '正在加载中....';
				
				// 模拟ajax
				window.setTimeout(function() {
					oChild.style.transform = `translateY(${scrollTop}px)`;
					oChild.addEventListener('transitionend', fnEnd, false);
				},2000)
			}

			function touchendEvent() {
				if (myScroll.y > oDown.offsetHeight) {
					oChild.setAttribute('scrollTop', 0);
					oChild.setAttribute('loadHeight', oDown.offsetHeight);
					scrollCallback(oDown);
				} else if (-myScroll.y - scrollTop > oUp.offsetHeight) {
					oChild.setAttribute('scrollTop', -scrollTop);
					oChild.setAttribute('loadHeight', oUp.offsetHeight);
					scrollCallback(oUp)
				}
			}

			myScroll.on('scroll', function(){
				if (myScroll.y > 50) {
					oDown.innerHTML = '松手刷新';
				} else {
					oDown.innerHTML = '下拉刷新';
				}

				if (-myScroll.y - (oChild.offsetHeight - oParent.offsetHeight) > 50) {
					oUp.innerHTML = '松手加载更多';
				} else {
					oUp.innerHTML = '上拉加载更多';
				}
			})

			oParent.addEventListener('touchend', touchendEvent, false);

		}
	</script>
</head>

<body>
	<div class="parent">
		<div class="child">
			<p>iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件</p>
			<p>它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验</p>
			<p>iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。</p>
			<p>即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说：</p>
			<p>细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。 动画可以使用用户自定义的擦出功能（反弹'bounce'，弹性'elastic'，回退'back'，...）。 你可以很容易的挂靠大量的自定义事件（onBeforeScrollStart,
				* 开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。
			</p>
			<p>你想成为iScroll大师。行，这就是我写以下内容的目的。 最好的学习iScroll的方法是看示例。在存档文件中你会发现一个叫做demo的文件夹示例。这里有大多数脚本功能的概述。 IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。
				尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。
			</p>
			<p>当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它。在DOMContentLoaded事件中或者inline initialization中做也可以，需要记住的是脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸有可能会错误。</p>
			<p>box-shadow, opacity, text-shadow and alpha channels are all properties that don't go very well together with hardware
				acceleration. Scrolling might look good with few elements but as soon as your DOM becomes more complex you'll start experiencing
				lag and jerkiness. Sometimes a background image to simulate the shadow performs better than box-shadow. The bottom line
				is: experiment with CSS properties, you'll be surprised by the difference in performance a small CSS change can do.</p>
		</div>
		<div class="dropdown">下拉刷新</div>
		<div class="dropup">上拉加载更多</div>
	</div>
</body>

</html>